<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div class="name-auth-dia">
      <div class="nav">
        <div class="title">绑定支付宝账号</div>
        <div class="close" @click="close">
          <i class="landscape landscape-guanbi"></i>
        </div>
      </div>
      <div class="con">
        <NForm
          ref="ruleForm"
          :show-label="false"
          :model="queryForm"
          show-feedback
          :rules="rules"
        >
          <n-form-item label="账号" path="alipayAccount">
            <n-input
              v-model:value="queryForm.alipayAccount"
              placeholder="请输入支付宝账号"
            />
          </n-form-item>
          <n-form-item label="验证码" path="smsCode">
            <div class="flex align-center w-full">
              <n-input
                style="flex: 1"
                v-model:value="queryForm.smsCode"
                placeholder="请输入验证码"
              />
              <NButton
                :disabled="codeTime !== 60"
                @click="handGetCode"
                class="code-btn"
                type="primary"
                attr-type="button"
              >
                <span v-if="codeTime === 60">获取验证码</span>
                <span v-else>{{ codeTime }}s后重新获取</span>
              </NButton>
            </div>
          </n-form-item>
        </NForm>
        <div class="tool flex">
          <n-button class="btn" @click="close">取消</n-button>
          <n-button
            class="btn confirm-btn"
            type="primary"
            :disabled="submitDis"
            @click="handleValidateClick"
          >
            确认
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import {
  FormInst,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NModal,
  useMessage
} from 'naive-ui'
import type { FormRules } from 'naive-ui'
import { computed, reactive, ref, inject } from 'vue'
import validate from '@/utils/validate'
import loginApi from '@/service/api/login'
type PropsState = {
  cellphone: string
}
const props = withDefaults(defineProps<PropsState>(), {
  cellphone: ''
})
const emit = defineEmits(['success'])
const $clone = inject('$clone') as <T>(data: T) => T
const toast = useMessage()
const submitDis = computed(() => {
  return !queryForm.value.alipayAccount
})
const queryForm = ref({
  alipayAccount: '',
  cellphone: '',
  smsCode: ''
})
const codeTime = ref(60)
const handGetCode = async () => {
  const cellPhone = props.cellphone
  if (!cellPhone) {
    toast.error('请输入手机号')
    return
  }
  if (!validate.isPhone(cellPhone)) {
    toast.error('手机号格式不正确')
    return
  }
  if (requestLoading) return
  requestLoading = true
  const { code, message } = await loginApi.sendCode({
    cellphone: cellPhone,
    type: 'BINDING_ACCOUNT'
  })
  if (code !== 200) {
    requestLoading = false
    toast.error(message)
    return
  }
  toast.success('验证码已发送到您的手机')
  requestLoading = false
  const timer = setInterval(() => {
    codeTime.value--
    if (codeTime.value <= 0) {
      clearInterval(timer)
      codeTime.value = 60
    }
  }, 1000)
}
const rules: FormRules = {
  alipayAccount: [
    {
      required: true,
      message: '支付宝账号不能为空',
      trigger: 'blur'
    }
  ],
  smsCode: [
    {
      required: true,
      message: '验证码不能为空',
      trigger: 'blur'
    }
  ]
}
const ruleForm = ref<FormInst | null>(null)
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      save()
    }
  })
}
let requestLoading = false
const save = async () => {
  if (requestLoading) return
  requestLoading = true
  const params = $clone(queryForm.value)
  params.cellphone = props.cellphone
  const { code, message } = await loginApi.doUpdAliAccount(params)
  if (code !== 200) {
    requestLoading = false
    toast.error(message)
    return
  }
  toast.success('换绑成功')
  emit('success')
  close()
  requestLoading = false
}
const state = reactive({
  dialogFormVisible: false
})
const close = () => {
  queryForm.value = {
    alipayAccount: '',
    cellphone: '',
    smsCode: ''
  }
  state.dialogFormVisible = false
}
const open = () => {
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.name-auth-dia {
  width: 476px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 24px;
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .close {
      cursor: pointer;
      i {
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .con {
    padding-top: 24px;
  }
  .phone-prefix {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding-right: 10px;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
      width: 0;
      height: 14px;
      border: 1px solid #999999;
    }
  }
  .code-btn {
    margin-left: 12px;
  }
  .tool {
    margin-top: 20px;
    justify-content: center;
    .btn {
      width: 124px;
      height: 40px;
    }
    .confirm-btn {
      margin-left: 24px;
    }
  }
}
</style>
